<template>
  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <!-- Backdrop -->
    <div 
      class="absolute inset-0 bg-black opacity-50"
      @click="appStore.clearError"
    ></div>

    <!-- Modal -->
    <div class="relative w-full max-w-md bg-white dark:bg-dark-800 rounded-xl shadow-xl overflow-hidden">
      <!-- Header -->
      <div class="bg-red-50 dark:bg-red-900/20 px-6 py-4 border-b border-red-200 dark:border-red-800">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <ExclamationCircleIcon class="w-6 h-6 text-red-600 dark:text-red-400" />
          </div>
          <div class="ml-3">
            <h3 class="text-lg font-medium text-red-800 dark:text-red-200">
              系统错误
            </h3>
          </div>
        </div>
      </div>

      <!-- Content -->
      <div class="px-6 py-4">
        <div class="space-y-4">
          <!-- Error message -->
          <div>
            <p class="text-sm text-gray-900 dark:text-gray-100 font-medium">
              {{ appStore.error?.message || '发生未知错误' }}
            </p>
            <p v-if="appStore.error?.details" class="text-sm text-gray-600 dark:text-gray-400 mt-2">
              {{ appStore.error.details }}
            </p>
          </div>

          <!-- Error code and timestamp -->
          <div class="bg-gray-50 dark:bg-dark-700 rounded-lg p-3">
            <div class="text-xs space-y-1">
              <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400">错误代码:</span>
                <span class="font-mono text-gray-900 dark:text-gray-100">
                  {{ appStore.error?.code || 'UNKNOWN' }}
                </span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-500 dark:text-gray-400">发生时间:</span>
                <span class="text-gray-900 dark:text-gray-100">
                  {{ formatTime(appStore.error?.timestamp) }}
                </span>
              </div>
            </div>
          </div>

          <!-- Suggestions -->
          <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
            <h4 class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
              建议的解决方案:
            </h4>
            <ul class="text-sm text-blue-700 dark:text-blue-300 space-y-1">
              <li>• 检查网络连接是否正常</li>
              <li>• 刷新页面重试</li>
              <li>• 如果问题持续，请联系系统管理员</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Actions -->
      <div class="bg-gray-50 dark:bg-dark-700 px-6 py-4 flex flex-col sm:flex-row sm:justify-end space-y-2 sm:space-y-0 sm:space-x-3">
        <button
          @click="copyError"
          class="btn-outline text-sm"
        >
          <ClipboardIcon class="w-4 h-4 mr-1" />
          复制错误信息
        </button>
        
        <button
          @click="refreshPage"
          class="btn-secondary text-sm"
        >
          <ArrowPathIcon class="w-4 h-4 mr-1" />
          刷新页面
        </button>
        
        <button
          @click="appStore.clearError"
          class="btn-primary text-sm"
        >
          知道了
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/app'
import { format } from 'date-fns'
import { zhCN } from 'date-fns/locale'

// Icons
import {
  ExclamationCircleIcon,
  ClipboardIcon,
  ArrowPathIcon
} from '@heroicons/vue/24/outline'

const appStore = useAppStore()

// Methods
const formatTime = (timestamp?: Date) => {
  if (!timestamp) return '未知'
  return format(timestamp, 'yyyy-MM-dd HH:mm:ss', { locale: zhCN })
}

const copyError = async () => {
  if (!appStore.error) return
  
  const errorText = `
错误代码: ${appStore.error.code}
错误信息: ${appStore.error.message}
详细信息: ${appStore.error.details || '无'}
发生时间: ${formatTime(appStore.error.timestamp)}
用户代理: ${navigator.userAgent}
页面地址: ${window.location.href}
`.trim()

  try {
    await navigator.clipboard.writeText(errorText)
    appStore.showSuccess('错误信息已复制到剪贴板')
  } catch (err) {
    console.error('复制失败:', err)
    appStore.showError('复制失败')
  }
}

const refreshPage = () => {
  window.location.reload()
}
</script>
